/* 内河涌 弹框 整治方案页 
 * @ 劳兆城 
 * @ 2017-08-11*/

<template>
	<div class="water-renovation clear">
		<div class="water-renovation-info pull-left">
			<div class="renovation-row">
				<div class="renovation-title">河涌沿线及周边的截污、治污情况概述</div>
				<div class="renovation-content">
					<Input v-model="water.staininfo" type="textarea" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="renovation-row">
				<div class="renovation-title">历史整治情况</div>
				<div class="renovation-content">
					<Input v-model="water.hishandleinfo" type="textarea" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="renovation-row">
				<div class="renovation-title">河涌计划整治的目标及时间</div>
				<div class="renovation-content">
					<Input v-model="water.planinfo" type="textarea" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="renovation-row">
				<div class="renovation-title">计划整治时间</div>
				<div class="renovation-content">
					<Date-picker :value="water.plandate" @on-change="dateChange"   type="date" placeholder="选择日期"></Date-picker>
				</div>
			</div>
			<div class="renovation-info-button pull-right">
				<Button @click.native="editInfoWater" class="pull-right" type="primary">保存</Button>
			</div>
		</div>
		<div class="water-renovation-table pull-left">
			<Table
			 	@on-selection-change="selectChange" 
			 	:columns="table.thead" 
			 	:data="table.tbody" 
			 	:height="470"
			 	size="small" 
			 	highlight-row 
			 	border></Table>
			 	<div class="renovation-table-button pull-right">
					<Button 
						@click.native="_editTableWater" 
						class="pull-right" 
						type="primary"
						:disabled="!canSave">保存</Button>
				</div>
		</div>
	</div>
</template>

<script>
	import { singleWaterNetRenovation } from 'common/js/table'
import { successNotice, errorNotice, cloneObj } from 'common/js/dom'
import { ERR_OK } from 'api/config'
import { getWaterRenovationInfo, editWaterRenovationInfo, getWaterRenovationTable, getWaterRenovationChosed, editWaterRenovationChosed } from 'api/aPicture'
import { mapGetters } from 'vuex'

export default {
		created () {
			this.chosed = []
		this._getWaterRenovationInfo()
		this._getWaterRenovationTable()
	},
		computed: {
			renovationChosed () {
				let arr = cloneObj(this.chosed)
			arr.map(item => {
					item.strivid = this.singleWaterNetId
				delete item._checked
				delete item._id
			})
			return arr
		},
			...mapGetters([
				'singleWaterNetId'
			])
		},
		data () {
			return {
				water: {},
				table: {
					thead: singleWaterNetRenovation,
					tbody: [{}]
				},
				canSave: false
			}
		},
		methods: {
			dateChange (time) {
				this.water.plandate = time
		},
			selectChange (data) {
				this.chosed = data
			this.canSave = true
		},
			_editInfoWater () {
				editWaterRenovationInfo(this.water).then(res => {
					if (res.code === ERR_OK) {
						this._getWaterRenovationInfo()
					successNotice('保存成功')
				} else {
						errorNotice('保存失败')
				}
				})
			},
			_getWaterRenovationInfo () {
				getWaterRenovationInfo().then(res => {
					if (res.code === ERR_OK && res.result.result.length) {
						this.water = res.result.result[0]
				}
				})
			},
			_editTableWater () {
				editWaterRenovationChosed(this.renovationChosed).then(res => {
					if (res.code === ERR_OK) {
						this._getWaterRenovationTable()
					successNotice('保存成功')
				} else {
						errorNotice('保存失败')
				}
				})
			},
			_getWaterRenovationTable () {
				getWaterRenovationTable().then(res => {
					if (res.code === ERR_OK) {
						this._getWaterRenovationChosed(res.result.result)
				}
				})
			},
			_getWaterRenovationChosed (arr) {
				getWaterRenovationChosed().then(res => {
					if (res.code === ERR_OK && res.result.result.length) {
						res.result.result.map(item => {
							for (let i of arr) {
								if (item.sthandletempid === i.sthandletempid) {
									i['_checked'] = true
								break
							}
							}
						})
					}
					this.table.tbody = arr
			})
			}
		}
	}
</script>


<style lang="scss">
	.singleWaterNet-model {
		.water-renovation {
			width: 100%;
			height: 100%;
			padding: 0 5px;
			.water-renovation-info {
				width: calc(50% - 10px);
				margin-right: 10px;
    			border: 1px solid #dddee1;
    			border-radius: 5px;
    			padding: 5px;
    			.renovation-row {
					display: flex;
					align-items:center;
					margin: 5px 0;
					.renovation-title {
						width: 120px;
						font-size: 12px;
						text-align: right;
						padding-right: 5px;
						margin-top: 2px;
					}
					.renovation-content {
						flex: 1;
						textarea {
							height: 52px !important;
						}
					}
				}
				.renovation-info-button {
					margin-top: 10px;
				}
			}
			.water-renovation-table {
				width: 50%;
				height: 100%;
				.renovation-table-button {
					margin-top: 10px;
				}
			}
		}
	}
</style>